<template>
    <div class="showpage">
        <div class="page">
            <div class="topbar">
                
                
                 <mu-flexbox>
                    <mu-flexbox-item class="flex-demo">
                    <span>价钱排序</span>
                    </mu-flexbox-item>
                    <mu-flexbox-item class="flex-demo">
                    <select name="" id="paixu" >
                        <option value="综合排序" selected="selected">综合排序</option>
                        <option value="价钱"  >价钱</option>
                        <option value="日期">日期</option>
                        <option value="人气">人气</option>
                    </select>
                    </mu-flexbox-item>
                    <mu-flexbox-item class="flex-demo">
                    <span>销量优先</span>
                    </mu-flexbox-item>
                </mu-flexbox>
            </div>
            <div class="goodslist">
                <div class="zhanwei" v-if='goodslist.length==0'>暂无数据</div>
                <mu-flexbox wrap='wrap' justify="space-around" :gutter="0" v-if='goodslist.length!=0'>
                    <mu-flexbox-item class="flex-demo" basis="40%" v-for='(item,index) in goodslist' :key='index'>
                        <router-link :to="{name:'particulars',params:{cid:item.id,name:item.name}}" >
                            <img v-lazy="item.img" lazy="loading" alt="">
                        </router-link>
                        <h5>{{item.name}}</h5>
                        <p>{{item.price||item.nowPrice}}</p>
                    </mu-flexbox-item>
                    
                </mu-flexbox>
            </div>
        </div>
    </div>

</template>
<script>
    import api from '../api/api.js'
    import pinyin from '../assets/js/pinyin.js'
    export default {
        data(){
            return{
                value:'',
                goodslist:[],

            }
        },
        // created(){
        //     console.log(this.$route.params)
        // },
        //清楚缓存
        beforeRouteEnter(to, from, next){
            if(from.name=='kind'){
                next(vm=>{
                    vm.goodslist=[];
                    vm.value=vm.$route.params
                    vm.$http.get(api.getlygoods(vm.value.cid,vm.value.keyword)).then((res)=>{
                        if(res.data.showapi_res_body.pageBean.contentlist){
                            vm.goodslist=res.data.showapi_res_body.pageBean.contentlist
                        }
                    })
                })
            }
            if(from.name=='phone'){
                next(vm=>{
                    vm.goodslist=[];
                    vm.value=vm.$route.params
                    vm.$http.get(api.getphonesearch(pinyin(vm.value.keyword))).then((res)=>{
                        if(res.data.showapi_res_body.phonePagebean.contentlist){
                            vm.goodslist=res.data.showapi_res_body.phonePagebean.contentlist
                        }
                    })
                })
            }
            if(from.name=='particulars'){
                next(vm=>{
                   
                })
            }
        },
    }
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}
select:focus,option{
    outline: none;
}

.topbar{
    padding-top:10px;
    .flex-demo{
        text-align: center;
    }
}
img[lazy=loading] {
    background: url('../assets/images/logo2.png') no-repeat;
    background-size: cover;
}
.goodslist{
    background-color: #f6f6f6;
    .flex-demo{
        padding:10px;
        
        img{
            min-height: 5rem;
            min-width: 5rem;
            width: 8rem;
            height: 8rem;
            height: auto;
            max-width: 100%;
        }
    }
    h5{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        height: 24px;
        font-size: 16px;
        -webkit-box-orient: vertical;
        text-align:justify;
        background-color:#fff;
    }
    p{
        color: #009688;
        background-color:#fff;
    }
}
.zhanwei{
    padding-top:20px;
    text-align: center;
    font-size: 20px;
    background-color: #fff;
}


</style>